<template>
	<view class="coupon-center" :class="'currentIndex-' + currentTabIndex">
		<!-- Banner区域 -->
		<image class="banner-img" :src="currentTab.banner" mode="widthFix"></image>
		
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<view class="nav-content">
				<view class="nav-left">
					<image src="/static/new/go.png" class="back-icon" @tap="goBack"></image>
					<view class="title-box">
						<text class="page-title">领券中心</text>
					</view>
				</view>
				
			</view>
		</view>

		<!-- 分类选项卡 -->
		<scroll-view  class="tab-scroll" scroll-x="true" show-scrollbar="false">
			<view class="tab-list">
				<view 
					class="tab-item" 
					:class="{ active: currentTabIndex === index }"
					v-for="(tab, index) in tabs" 
					:key="index"
					@tap="switchTab(index)"
				>
					{{ tab.name }}
				</view>
			</view>
		</scroll-view>

		<!-- 内容区包装器 -->
		<view class="content-wrapper" :style="{ background: currentTab.bgColor}">
			<!-- 主要优惠券区域 -->
			<view class="main-coupons">
				<view class="coupon-item">
					<view class="tag" :style="{ background: currentTab.tagBg, color: currentTab.tagColor }">接单更快</view>
					<view class="content">
						<image class="platform-icon" src="/static/new/8.jpg" mode="aspectFit"></image>
						<view class="platform-name">{{ currentTab.mainItems[0].name }}</view>
						<view class="amount">{{ currentTab.mainItems[0].amount }}</view>
						<button class="get-btn" :style="{ background: currentTab.btnColor }">{{ currentTab.mainItems[0].btnText }}</button>
					</view>
				</view>
				
				<view class="coupon-item">
					<view class="tag purple" :style="{ background: currentTab.tagBg2, color: currentTab.tagColor2 }">价格更低</view>
					<view class="content">
						<image class="platform-icon" src="/static/new/8.jpg" mode="aspectFit"></image>
						<view class="platform-name">{{ currentTab.mainItems[1].name }}</view>
						<view class="amount">{{ currentTab.mainItems[1].amount }}</view>
						<button class="get-btn" :style="{ background: currentTab.btnColor2 }">{{ currentTab.mainItems[1].btnText }}</button>
					</view>
				</view>
			</view>

			<!-- 其他商家 -->
			<view class="section-title">{{ currentTab.sectionTitle }}</view>
			<view class="other-coupons">
				<view class="other-item" v-for="(item, index) in currentTab.otherItems" :key="index">
					<image class="other-icon" src="/static/8.jpg" mode="aspectFit"></image>
					<view class="other-name">{{ item.name }}</view>
					<view class="other-amount">{{ item.amount }}</view>
					<button class="other-btn" :style="{ background: currentTab.otherBtnBg, color: currentTab.btnColor }">{{ item.btnText }}</button>
				</view>
			</view>

			<!-- 底部服务 -->
			<view class="section-title">{{ currentTab.serviceTitle }}</view>
			<view class="service-list">
				<view class="service-item" v-for="(item, index) in currentTab.serviceItems" :key="index">
					<image class="service-icon" src="/static/new/8.jpg" mode="aspectFit"></image>
					<view class="service-name">{{ item.name }}</view>
					<view class="service-amount">{{ item.amount }}</view>
					<button class="service-btn" :style="{ background: currentTab.serviceBtnBg, color: currentTab.btnColor }">{{ item.btnText }}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentTabIndex: 0,
			tabs: [
				{
					name: '外卖红包',//标题
					banner: '/static/new/2.png',//顶部图片
					btnColor: '#FFB800',//按钮背景颜色1
					btnColor2: '#FFB800',//按钮背景颜色2
					tagBg: '#FFF8E6',//主1标签背景颜色
					tagColor: '#FFB800',//主1标签颜色
					tagBg2: '#FFF8E6',//主2标签背景颜色
					tagColor2: '#FFB800',//主2标签颜色
					bgColor: '#FFB800',//内容背景颜色
					otherBtnBg: '#FFF8E6',//其他商家 按钮背景颜色
					serviceBtnBg: '#FFF8E6',//底部服务 按钮背景颜色
					mainItems: [//主1  主2
						{
							name: '美团外卖',
							amount: '最高领50元红包',
							btnText: '领券点餐'
						},
						{
							name: '饿了么',
							amount: '最高领30元红包',
							btnText: '领券点餐'
						}
					],
					sectionTitle: '其他外卖红包',//其他商家  标题
					otherItems: [//其他商家 内容
						{
							name: '大众点评',
							amount: '最高领20元',
							btnText: '去领取'
						},
						{
							name: '美团商超',
							amount: '领15元红包',
							btnText: '去领取'
						},
						{
							name: '饿了么商超',
							amount: '领10元红包',
							btnText: '去领取'
						}
					],
					serviceTitle: '生鲜/商超/买菜',//底部服务  标题
					serviceItems: [//底部服务 内容
						{
							name: '美团买菜',
							amount: '最高领20元',
							btnText: '去领取'
						},
						{
							name: '饿了么买菜',
							amount: '领15元红包',
							btnText: '去领取'
						},
						{
							name: '多多买菜',
							amount: '领10元红包',
							btnText: '去领取'
						}
					]
				},
				{
					name: '打车出行',
					banner: '/static/new/2-1.png',
					btnColor: '#ff6b4b',
					btnColor2: '#8f57ff',
					tagBg: '#fff1f0',
					tagColor: '#ff6b4b',
					tagBg2: '#f5f0ff',
					tagColor2: '#8f57ff',
					bgColor: '#ff6b4b',
					otherBtnBg: '#fff5f4',
					serviceBtnBg: '#fff5f4',
					mainItems: [
						{
							name: '滴滴出行',
							amount: '最高领150元，打车5折起',
							btnText: '领券打车'
						},
						{
							name: '花小猪打车',
							amount: '首单减10元，最高领100元',
							btnText: '领券打车'
						}
					],
					sectionTitle: '其他打车出行',
					otherItems: [
						{
							name: 'T3打车',
							amount: '最高领100元',
							btnText: '去领取'
						},
						{
							name: '高德打车',
							amount: '领100元红包',
							btnText: '去领取'
						},
						{
							name: '滴滴打车',
							amount: '21元红包天天领',
							btnText: '去领取'
						}
					],
					serviceTitle: '加油/洗车/代驾',
					serviceItems: [
						{
							name: '加油/洗车',
							amount: '最高领20元',
							btnText: '去领取'
						},
						{
							name: '代驾接送',
							amount: '领15元红包',
							btnText: '去领取'
						},
						{
							name: '搬家/搬运',
							amount: '领10元红包',
							btnText: '去领取'
						}
					]
				},
				{
					name: '吃喝玩乐',
					banner: '/static/new/2.png',
					btnColor: '#ff4b4b',
					btnColor2: '#ff4b4b',
					tagBg: '#fff1f0',
					tagColor: '#ff4b4b',
					tagBg2: '#fff1f0',
					tagColor2: '#ff4b4b',
					bgColor: '#FDEEF1',
					otherBtnBg: '#fff1f0',
					serviceBtnBg: '#fff1f0',
					mainItems: [
						{
							name: '美团团购',
							amount: '最高领100元红包',
							btnText: '领券购买'
						},
						{
							name: '大众点评',
							amount: '最高领80元红包',
							btnText: '领券购买'
						}
					],
					sectionTitle: '其他商家优惠',
					otherItems: [
						{
							name: '餐饮美食',
							amount: '最高领50元',
							btnText: '去领取'
						},
						{
							name: '休闲娱乐',
							amount: '领30元红包',
							btnText: '去领取'
						},
						{
							name: '丽人美发',
							amount: '领20元红包',
							btnText: '去领取'
						}
					],
					serviceTitle: '精选服务',
					serviceItems: [
						{
							name: '美食餐饮',
							amount: '最高领50元',
							btnText: '去领取'
						},
						{
							name: '休闲娱乐',
							amount: '领30元红包',
							btnText: '去领取'
						},
						{
							name: '生活服务',
							amount: '领20元红包',
							btnText: '去领取'
						}
					]
				},
				{
					name: '酒店机票',
					banner: '/static/new/2.png',
					btnColor: '#3B7FFF',
					btnColor2: '#3B7FFF',
					tagBg: '#F0F5FF',
					tagColor: '#3B7FFF',
					tagBg2: '#F0F5FF',
					tagColor2: '#3B7FFF',
					bgColor: '#3B7FFF',
					otherBtnBg: '#F0F5FF',
					serviceBtnBg: '#fff1f0',
					mainItems: [
						{
							name: '飞猪旅行',
							amount: '最高立减1000元',
							btnText: '领券预订'
						},
						{
							name: '携程旅行',
							amount: '最高立减800元',
							btnText: '领券预订'
						}
					],
					sectionTitle: '其他旅行优惠',
					otherItems: [
						{
							name: '美团旅行',
							amount: '最高减500元',
							btnText: '去领取'
						},
						{
							name: '同程旅行',
							amount: '减400元优惠',
							btnText: '去领取'
						},
						{
							name: '去哪儿旅行',
							amount: '减300元优惠',
							btnText: '去领取'
						}
					],
					serviceTitle: '周边游玩',
					serviceItems: [
						{
							name: '景点门票',
							amount: '最高减500元',
							btnText: '去领取'
						},
						{
							name: '周边游',
							amount: '减400元优惠',
							btnText: '去领取'
						},
						{
							name: '汽车票',
							amount: '减300元优惠',
							btnText: '去领取'
						}
					]
				}
			],
			statusBarHeight: 20
		}
	},
	onLoad() {
		// 获取系统信息设置状态栏高度
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight
	},
	computed: {
		currentTab() {
			return this.tabs[this.currentTabIndex]
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		switchTab(index) {
			this.currentTabIndex = index
		}
	}
}
</script>

<style>
/* 导航栏样式 */
.nav-bar {
	position: fixed;
	top: 18rpx;
	left: 0;
	right: 0;
	z-index: 999;
}

.nav-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 44px;
	margin-top: var(--status-bar-height);
	padding: 0 12rpx;
}

.nav-left {
	display: flex;
	align-items: center;
}

.nav-left image {
	width: 45rpx;
	height: 45rpx;
	padding-top: 12rpx;
}

.back-icon {
	width: 60rpx;
	height: 60rpx;
	padding: 10rpx;
}

.title-box {
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 30rpx;
	padding: 4rpx 24rpx;
	margin-left: 8rpx;
}

.page-title {
	color: #000;
	font-size: 28rpx;
}

.capsule-box {
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 30rpx;
	padding: 4rpx 24rpx;
}

.capsule-icon {
	width: 44rpx;
	height: 44rpx;
}

/* 移除内容区域的上边距，因为banner图需要从顶部开始 */
.coupon-center {
	min-height: 100vh;
	background-color: #f8f8f8;
	position: relative;
}

.banner-img {
	width: 100%;
	display: block;
}

.tab-scroll {
	/* background: #fff; */
	padding: 20rpx 0;
	position: absolute;
	top: 270rpx;  /* 根据banner图高度调整 */
	left: 0;
	right: 0;
	z-index: 10;
	margin-right: 40rpx;
}

/* 内容区域包装器 */
.content-wrapper {
	position: absolute;
	top: 380rpx;  /* tab-scroll底部位置 */
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9;
	background:v-bind(bgColor);
	border-radius: 20rpx 20rpx 0 0;
	min-height: 800rpx; /* 确保内容区域足够高 */
}

.tab-list {
	border-radius: 40rpx;
	background: #fff;
	margin: 0 20rpx;
	display: flex;
	padding: 0 10rpx;
	width: 100%;
}

.tab-item {
	margin: 10rpx;
	padding: 12rpx 32rpx;
	font-size: 24rpx;
	color: #666;
	border-radius: 26rpx;
	position: relative;
	transition: all 0.3s;
}

.tab-item:nth-child(1).active {
	color: #fff;
	background-color: #FFB800;
}

.tab-item:nth-child(2).active {
	color: #fff;
	background-color: #ff6b4b;
}

.tab-item:nth-child(3).active {
	color: #fff;
	background-color: #ff4b4b;
}

.tab-item:nth-child(4).active {
	color: #fff;
	background-color: #3B7FFF;
}

.shop-banner {
	margin: 20rpx;
	background: linear-gradient(to right, #4cd964, #3ac756);
	border-radius: 12rpx;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.shop-left {
	display: flex;
	align-items: center;
}

.check-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 12rpx;
}

.shop-text {
	color: #fff;
	font-size: 28rpx;
}

.shop-subtext {
	color: #fff;
	font-size: 24rpx;
	margin-left: 20rpx;
	opacity: 0.9;
}

.detail-link {
	color: #fff;
	font-size: 24rpx;
	background: rgba(255,255,255,0.2);
	padding: 6rpx 20rpx;
	border-radius: 20rpx;
}

.main-coupons {
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
}

.coupon-item {
	width: calc(50% - 10rpx);
	background: #fff;
	border-radius: 12rpx;
	position: relative;
}

/* 外卖红包主题渐变背景 */
.currentIndex-0 .coupon-item {
	background: linear-gradient(to bottom right, #fff5e7, #fff);
}

/* 其他主题保持白色背景 */
.currentIndex-1 .coupon-item,
.currentIndex-2 .coupon-item,
.currentIndex-3 .coupon-item {
	background: #fff;
}

.tag {
	position: absolute;
	right: 20rpx;
	top: 20rpx;
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	background: v-bind(tagBg);
	color: v-bind(tagColor);
	border-radius: 4rpx;
}

.tag.purple {
	background: v-bind(tagBg2);
	color: v-bind(tagColor2);
}

.content {
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.platform-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-bottom: 12rpx;
}

.platform-name {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 8rpx;
}

.amount {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 20rpx;
}

.get-btn {
	width: 100%;
	height: 64rpx;
	line-height: 64rpx;
	border-radius: 32rpx;
	font-size: 26rpx;
	color: #fff;
	border: none;
	background: v-bind(btnColor);
}

.get-btn.purple {
	background: v-bind(btnColor2);
}

.section-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	text-align: center;
	position: relative;
	padding: 40rpx 0 30rpx;
	margin: 0 20rpx;
}

.section-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: calc(50% - 100rpx);
	height: 1rpx;
	background: #eee;
}

.section-title::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: calc(50% - 100rpx);
	height: 1rpx;
	background: #eee;
}

.other-coupons {
	padding: 0 20rpx;
	display: flex;
	justify-content: space-between;
}

.other-item {
	width: calc(33.33% - 14rpx);
	background: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin:0 6rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.other-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-bottom: 8rpx;
}

.other-name {
	font-size: 26rpx;
	color: #333;
	margin-bottom: 6rpx;
}

.other-amount {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.other-btn {
	width: 100%;
	height: 56rpx;
	line-height: 56rpx;
	background: v-bind(otherBtnBg);
	color: v-bind(btnColor);
	font-size: 24rpx;
	border-radius: 28rpx;
	border: none;
}

.service-list {
	padding: 0 20rpx;
	display: flex;
	justify-content: space-between;
}

.service-item {
	width: calc(33.33% - 14rpx);
	padding: 20rpx;
	margin:0 6rpx;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.service-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-bottom: 8rpx;
}

.service-name {
	font-size: 24rpx;
	color: #333;
}
.service-amount {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.service-btn {
	width: 100%;
	height: 56rpx;
	line-height: 56rpx;
	background: v-bind(otherBtnBg);
	color: v-bind(btnColor);
	font-size: 24rpx;
	border-radius: 28rpx;
	border: none;
}
button::after{
	border: none;
}
</style> 